<template>
  <div class="container">
    <el-form :inline="true" :model="filterData" class="search">
      <el-form-item>
        <el-select
          v-model="searchWords.publishState"
          clearable
          placeholder="发布状态"
          style="width: 100px"
        >
          <el-option
            v-for="item in publishStateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchWords.isBannar"
          clearable
          placeholder="轮播"
          style="width: 100px"
        >
          <el-option value="1" label="是" />
          <el-option value="2" label="否" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchWords.isConnect"
          clearable
          placeholder="链接"
          style="width: 100px"
        >
          <el-option value="1" label="链接" />
          <el-option value="2" label="非链接" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchWords.isTop"
          clearable
          placeholder="置顶"
          style="width: 100px"
        >
          <el-option value="1" label="是" />
          <el-option value="2" label="否" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          clearable
          placeholder="名称"
          v-model="searchWords.infoName"
          style="width: 110px"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          clearable
          placeholder="来源"
          v-model="searchWords.infoOrigin"
          style="width: 110px"
        />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" @click="initList()" />
        <el-button type="primary" @click="addO" plain style="margin-left: 5px">
          + 新增
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table-contain">
      <Table
        ref="tableRef"
        height="100%"
        row-key="id"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
        <template #publishState="{ row }">
          {{
            getTranslate(publishStateList, "value", row.publishState, "label")
          }}
        </template>
        <template #isConnect="{ row }">
          {{ row.isConnect == 1 ? "是" : row.isConnect == 2 ? "否" : "-" }}
        </template>
        <template #publishDate="{ row }">
          {{ row.publishDate ? row.publishDate : "-" }}
        </template>
        <template #isBannar="{ row }">
          <el-switch
            v-model="row.isBannar"
            size="small"
            active-text="是"
            inactive-text="否"
            active-value="1"
            inactive-value="2"
            :before-change="() => beforeChange(row, 1)"
          />
        </template>
        <template #isTop="{ row }">
          <el-switch
            v-model="row.isTop"
            size="small"
            active-text="是"
            inactive-text="否"
            active-value="1"
            inactive-value="2"
            :before-change="() => beforeChange(row, 2)"
          />
        </template>
        <template #operation="{ row }">
          <el-button
            :icon="Edit"
            plain
            type="primary"
            @click="edit(row, false)"
          >
            编辑
          </el-button>
          <el-button
            v-if="row.publishState != 2"
            :icon="Position"
            plain
            type="warning"
            @click="getRelease(row, 2)"
          >
            发布
          </el-button>
          <el-button
            v-if="row.publishState == 2"
            :icon="RefreshLeft"
            plain
            type="warning"
            @click="getRelease(row, 3)"
          >
            撤回
          </el-button>
          <el-button
            v-if="row.publishState == 2"
            :icon="View"
            plain
            type="success"
            @click="edit(row, true)"
          >
            详情
          </el-button>
          <el-button
            v-if="row.publishState != 2"
            :icon="Delete"
            type="danger"
            plain
            @click="beforeChange(row, 3)"
          >
            删除
          </el-button>
        </template>
      </Table>
    </div>
    <Page
      :page-data="pageData"
      :total="tableData.total"
      @page-no-change="(pageNum) => (pageData.pageNum = pageNum)"
      @page-size-change="(pageSize) => (pageData.pageSize = pageSize)"
    />
    <EditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      v-model:isDisabled="isDisabled"
      :parent-menu-option="tableData.data"
      @submit="initList"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import Table from "@/components/pageTable/table";
import { ElMessage, ElMessageBox } from "element-plus";
import EditForm from "./components/EditForm.vue";
import {
  Delete,
  Edit,
  View,
  Search,
  RefreshLeft,
  Position,
  Failed,
} from "@element-plus/icons-vue";
import Page from "@/components/pageTable/Page.vue";
import { getTranslate } from "@/util";
import {
  pageInfo,
  publishInfo,
  selectInfoById,
  updateInfoOther,
} from "@/api/informationManage.ts";

let filterData = reactive({ name: "" });
const editFormVisible = ref<boolean>(false);
const tableRef = ref();
const rowData = ref();
const isDisabled = ref<boolean>(false);
const pageData = reactive({
  pageSize: 15,
  pageNum: 1,
});
const publishStateList = [
  { value: "1", label: "待发布" },
  { value: "2", label: "已发布" },
  { value: "3", label: "撤回" },
];
const searchWords = reactive({
  infoName: "",
  infoOrigin: "",
  isBannar: "",
  isConnect: "",
  isTop: "",
  publishState: "",
  state: "",
});
const tableData = reactive({
  columns: [
    { label: "发布状态", prop: "publishState", width: 85, template: true },
    /*{ label: "封面图片", prop: "infoFileUrl", width: 150 },*/
    { label: "标题", prop: "infoName", width: 300 },
    { label: "来源", prop: "infoOrigin", width: 100 },
    { label: "链接", prop: "isConnect", width: 60, template: true },
    { label: "首页轮播(最多8个)", prop: "isBannar", width: 140, template: true },
    { label: "置顶(最多3个)", prop: "isTop", width: 120, template: true },
    // { label: "阅读次数", prop: "readTotal", width: 85 },
    { label: "发布/撤销时间", prop: "publishDate", width: 160 },
    { label: "发布人", prop: "publishUserName", width: 80 },
    {
      label: "操作",
      prop: "operation",
      align: "left",
      fixed: "right",
      template: true,
      width: 290,
    },
  ],
  loading: false,
  total: 0,
  data: [],
});

async function initList(page: number) {
  pageData.pageNum = page || 1;
  let params = {
    pageNum: pageData.pageNum || 1,
    pageSize: pageData.pageSize,
    ...searchWords,
  };
  tableData.loading = true;
  const { data, msg, success } = await pageInfo(params);
  if (!success) {
    ElMessage.error(msg);
    tableData.loading = false;
    return;
  }
  tableData.loading = false;
  tableData.data = data?.list;
  tableData.total = data?.total;
}

async function edit(row: any, bl: boolean) {
  const { data, msg, success } = await selectInfoById({ id: row.id });
  if (!success) {
    ElMessage.error(msg);
    return;
  }
  data.isConnect = data.isConnect.toString();
  rowData.value = data;
  isDisabled.value = bl;
  editFormVisible.value = true;
}

function beforeChange(row: any, type: any) {
  let str = type == 1 ? "轮播" : "置顶";
  if (type == 1) {
    if (row.isBannar == 1) {
      str = "取消轮播";
    } else {
      str = "轮播";
    }
  } else if (type == 2) {
    if (row.isTop == 1) {
      str = "取消置顶";
    } else {
      str = "置顶";
    }
  } else if (type == 3) {
    str = "删除";
  }
  return new Promise((resolve) => {
    ElMessageBox.confirm(`是否${str}?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      let param = {
        id: row.id,
        isBannar: type == 1 ? (row.isBannar == 1 ? "2" : "1") : "",
        isTop: type == 2 ? (row.isTop == 1 ? "2" : "1") : "",
        isDel: type == 3 ? (row.isDel == 1 ? "2" : "1") : "",
      };
      const { success, msg } = await updateInfoOther(param);
      if (!success) {
        tableData.loading = false;
        ElMessage.error(msg);
        return;
      }
      resolve(true);
      ElMessage.success("操作成功");
      await initList(1);
    });
  });
}

async function addO() {
  isDisabled.value = false;
  editFormVisible.value = true;
}

async function getRelease(row: any, type: any) {
  let str = "";
  if (type == 2) {
    str = "发布资讯";
  } else {
    str = "撤回";
  }
  ElMessageBox.confirm(`是否确认${str}?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    tableData.loading = true;
    const { success, msg } = await publishInfo({
      id: [row?.id],
      publishState: type,
    });
    if (!success) {
      tableData.loading = false;
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await initList(1);
  });
}

onMounted(async () => {
  await initList(pageData.pageNum);
});

watch(pageData, async () => {
  await initList(pageData.pageNum);
});
watch(searchWords, async () => {
  await initList(1);
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
</style>
